<template>
  <div>

    <el-descriptions :column="2" :labelStyle="{'margin-left':'20px'}">
      <el-descriptions-item label="订单编号">{{ orderData.orderNo }}</el-descriptions-item>
      <el-descriptions-item label="订单来源">{{orderData.orderSourceName}}

<!--        <span v-if="0<=orderData.orderSource<=3">自有订单 - </span>-->

<!--        <dict-tag-->
<!--          style="display: inline-block" :options="dict.type.sys_order_source"-->
<!--          :value="orderData.orderSource"/>-->
      </el-descriptions-item>
      <el-descriptions-item label="客户名称">{{ orderData.memberName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ orderData.memberPhone }}</el-descriptions-item>
      <el-descriptions-item label="预计取车时间">{{ orderData.rentalStartTime }}</el-descriptions-item>
      <el-descriptions-item label="实际取车时间">{{ orderData.realityStartTime||'-' }}</el-descriptions-item>
      <el-descriptions-item label="预计还车时间">{{ orderData.rentalEndTime }}</el-descriptions-item>
      <el-descriptions-item label="实际还车时间">{{ orderData.realityEndTime||'-' }}</el-descriptions-item>
      <el-descriptions-item label="预计取车门店">{{ orderData.takeStoreName }}</el-descriptions-item>
      <el-descriptions-item label="实际取车门店">{{ orderData.realityTakeStoreName||'-' }}</el-descriptions-item>
      <el-descriptions-item label="预计还车门店">{{ orderData.alsoStoreName }}</el-descriptions-item>
      <el-descriptions-item label="实际还车门店">{{ orderData.realityAlsoStoreName||'-' }}</el-descriptions-item>
      <el-descriptions-item label="车辆">{{ orderData.carNo||'-' }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <dict-tag :options="dict.type.sys_order_status"
                 :value="orderData.orderStatus"/></el-descriptions-item>
    </el-descriptions>
    <!--      除ota外的都有-->
    <div class="bottom-layout" v-if="orderData.orderSource==1">

      <el-button  type="primary" size="mini" @click="goDetail">查看详情</el-button>
      <template v-hasPermi="['order:orderBasic:supplyCar']">
        <!--      预定中且未排车且有预排车-->
        <el-button v-if="orderData.orderStatus<4&&orderData.isBook&&orderData.isPlatoon==2&&orderData.carId" type="primary" size="mini" @click="directSchedule">确认预排</el-button>

        <!--      预定中且未排车-->
        <el-button v-if="orderData.orderStatus<4&&orderData.isBook&&orderData.isPlatoon==2" type="primary" size="mini" @click="scheduleCar">手动排车</el-button>

        <!--      预定中且已排车-->
        <el-button v-if="orderData.orderStatus<4&&orderData.isBook&&orderData.isPlatoon==1" size="mini" @click="scheduleCar">重新排车</el-button>
      </template>


    </div>


    <el-dialog title="去配车" :visible.sync="showpeiche" width="1000px" destroy-on-close append-to-body>
      <MmvPeiche ref="MmvPeiche" v-if="showpeiche" :orderNo="orderData.orderNo" :isOta="orderData.orderSource!=1" @close="scheduleFinish" @show="showpeiche = true"></MmvPeiche>
      <div slot="footer">
        <el-button @click="showpeiche = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import * as api from "@/api/order";
import MmvPeiche from '@/views/order/orderBasic/pageche'

export default {
  name: "ScheduleOrderOverview",
  components:{
    MmvPeiche
  },
  dicts:['sys_order_source', 'sys_order_status'],
  props:{
    orderData:{
      type: Object,
      default:()=>{
        return {}
      }
    }
  },
  data(){
    return{
      showpeiche:false
    }
  },
  methods:{

    goDetail(){
      this.$router.push({
        path: '/orderBasic/detail',
        query: {orderNo: this.orderData.orderNo}
      })
    },

    directSchedule(){
      const data = {
        orderNo: this.orderData.orderNo,
        carId: this.orderData.carId,
        isOta:this.orderData.orderSource!=1
      };

      this.$modal.confirm(`确定分配车辆${this.orderData.carNo}？`).then(res=>{
        api.supplyCar(data).then(response => {
          this.$message.success("操作成功");
          this.$emit('refresh')
          this.$emit('cancel')
        });
      })

    },

    scheduleCar(){
      this.showpeiche = true
    },

    scheduleFinish(){
      this.showpeiche = false
      this.$emit('refresh')
      this.$emit('cancel')
    },
  }
}
</script>

<style scoped>
.bottom-layout{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}
</style>
